<template>
	<view class="cu-form-group" style="position: relative;">
		<view class="title">
			{{title}}
			<view style="width: 60rpx;display: inline-block;">
				<uni-icons type="locked-filled" color="#d02f2a" v-if="bill_lock"></uni-icons>
			</view>
		</view>
		<input placeholder="单据编号" :disabled="true" :value="bill" @input="
					e => {
						bill = (e.detail.value + '').toUpperCase();
						//bill_issure = false;
						bill_lock = false;
						//onBillKeyEnter();
					}
				"
		 name="input" type="text" @confirm="onBillKeyEnter(bill)" />

		<button class="cu-btn bg-green shadow" @click="openChooseBillModal">选择</button>

		<view>
			<!-- 选择单号 -->
			<view class="cu-modal bottom-modal" :class="chooseBillModal.isOpen ? 'show' : ''">
				<view class="cu-dialog" @tap.stop="">
					<view class="cu-bar bg-white">
						<view class="action text-blue" @tap="hideChooseBillModal">取消</view>
						<view class="action text-green" @tap="onChooseBillModalOk">确定</view>
					</view>
					<view class="cu-form-group solid-bottom hadow shadow-lg" style="text-align: left;">
						<view class="title">单号</view>
						<input placeholder="输入单号搜索" @input="
										e => {
											chooseBillModal.searchText = (e.detail.value + '').toUpperCase();
										}
									"
						 :value="chooseBillModal.searchText" name="input" type="text" @confirm="onBillSearch" />
						<button class="cu-btn sm  line-blue" @click="onBillSearch">搜索</button>
					</view>
					<view class="grid col-12 " style="height:60vh; min-height:300rpx">
						<my-list-viewer ref="listViewRef" height="60%" style="width:100%" :i="-1" :down="{ use: false }" width="100%"
						 :top="0" @loadData="onChooseBillModalLoadData">
							<!-- 数据列表 -->
							<!-- 	<view style="height:100rpx;">
										<uni-search-bar placeholder="搜索" cancelButton="none"  bgColor="#f0f0f0" style="background: #fff;" @confirm="()=>{}" />
									</view>
									<equip-list :list="goods"></equip-list> -->
							<radio-group @change="onChooseBillModalRadioChanged">
								<view style="border-top:1px solid #ccc"></view>
								<label class="cu-form-group" v-for="(item, idx) in chooseBillModal.bills" :key="idx">
									<view class="title">
										<text>{{ item[rangeKey] }}</text>
									</view>
									<radio name="orderNum" :value="idx + ''"></radio>
								</label>
							</radio-group>
						</my-list-viewer>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import api from '@/serveices/wms-api.js';
	export default {
		model: {
			prop: 'value',
			event: 'change'
		},
		
		props: {
			rangeKey: {
				type: String,
				default () {
					return "bill_id"
				}
			},
			rangeSource: Object,
			value: String,
			title: String
		},
		computed: {
			bigType() {
				let type = 1;
				if (this.optType == 'PICKUP') type = 2;
				return type;
			}
		},
		data() {
			return {
				bill: '',
				bill_confirm: -1,
				bill_lock :false,
				// bill_issure: false,
				chooseBillModal: {
					isOpen: false,
					bills: [],
					choosedIdx: -1,
					searchText:''
				}
			};
		},
		watch: {
			// bill(newVal, oldVal) {
			// 	if (newVal != oldVal) {
			// 		this.$emit('change', newVal);
			// 	}
			// },
			bill(newVal, oldVal) {
				if (newVal != oldVal) {
					this.unlock();
					this.$emit('change', newVal);
				}
			},
			value(newVal, oldVal) {
				if (newVal != oldVal) {
					this.bill = newVal
				}
			},
		},
		methods: {
			// 操作API
			lock() {
				this.bill_lock = true;
			},
			unlock() {
				this.bill_lock = false;
			},
			clear() {
				this.bill_lock = false;
				this.bill = '';
			},
			// 设置值并触发回车
			setValueAndTriggerEnter(bill,row, extData) {
				this.unlock();
				this.bill = bill;
				this.$emit('confirm', {
					bill: bill,
					row: row,
					extData: extData
				});
			},
			setValue(bill){
				this.bill = bill;
			},
			// confirmBill(bill, cancel) {
			// 	if (!cancel) {
			// 		this.bill = bill;
			// 		this.confirmed_bill = this.bill;
			// 		this.bill_issure = true;
			// 	} else {
			// 		this.bill = bill;
			// 		this.bill_issure = false;
			// 		this.confirmed_bill = -1;
			// 	}
			// },
			// 单据确认
			onBillKeyEnter(outBill, row) {
				var bill = outBill || this.bill;
				//调用 搜索强制确认
				// if(!row){
				// 	this.$emit('confirm', { bill: bill,row:row });
				// }
				this.setValueAndTriggerEnter(bill,row)
				// this.$emit('confirm', {
				// 	bill: bill,
				// 	row: row
				// });
			},

			reset(bill) {
				if (bill) {
					// this.bill = bill,
				} else {
					confirmBill('', false);
					this.bill_type_idx = -1;
				}
			},

			openChooseBillModal() {
				this.chooseBillModal.isOpen = true;
				this.chooseBillModal.choosedIdx = -1;
				this.chooseBillModal.bills = [];
				this.chooseBillModal.searchText = ''
				//this.$refs.listViewRef.resetUpScroll();
			},
			hideChooseBillModal() {
				this.chooseBillModal.isOpen = false;
			},
			onBillSearch(){
				this.$refs.listViewRef.resetUpScroll();
			},
			onChooseBillModalLoadData(page) {
				console.log(page);
				const param = {
					keyWords: this.chooseBillModal.searchText,
					page: page.num,
					rows: page.size,
					...this.rangeSource.apiParam
				}
				console.log(this)
				api[this.rangeSource.apiMethod].call(this, param).then(res => {
						const pageData = res.data;
						this.$refs.listViewRef.endSuccess(pageData.length);
						//设置列表数据
						if (page.num == 1) this.chooseBillModal.bills = []; //如果是第一页需手动制空列表
						this.chooseBillModal.bills = this.chooseBillModal.bills.concat(pageData); //追加新数据
					})
					.catch(() => {
						this.$refs.listViewRef.endErr();
					});
			},
			onChooseBillModalOk() {
				if (this.chooseBillModal.choosedIdx > -1) {
					const billRow = this.chooseBillModal.bills[this.chooseBillModal.choosedIdx];
					const bill = billRow[this.rangeKey];
					this.bill = bill;
					this.hideChooseBillModal();
					// this.onConfirmBill();
					this.onBillKeyEnter(bill, billRow);
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择一个单据',
						duration: 2000
					});
				}
			},
			onChooseBillModalRadioChanged(e) {
				this.chooseBillModal.choosedIdx = parseInt(e.detail.value);
			}
		},
		beforeMount() {

		}
	};
</script>

<style></style>
